<template>
  <div class= "porpup" v-show="porpFn1">
      <div class="po-head">
          <div class="po-head-fl">
                  <div class="back" @click = "close"><i class="icon iconfont icon-fangxiang"></i></div>
          </div>
          <div class="po-head-fr">
              <input type="text" name="sousuo" placeholder="搜索想要的商品" v-model="msg" v-on:keydown.enter ="sssp()">
              <i class="icon iconfont icon-sousuo"></i>
          </div>
      </div>
      <div class = "sh1">
          <div>昌平西关店</div>
          <div @click="xiao()">销量 <i class="icon iconfont icon-up" v-if="!flag2"></i><i class="icon iconfont icon-down" v-if="flag2"></i></div>
          <div @click="paixu()">价格   <i class="icon iconfont icon-up" v-if="!flag1"></i><i class="icon iconfont icon-down" v-if="flag1"></i></div>
      </div>
      <div class="lis">
            <div v-for = "item in shan">
                <img :src="item.img">
                <div class="tejia">
                    <span v-if="item.promotionInfo.matchedPros.length == 1">{{item.promotionInfo.promotionDisplay}}</span>
                    <span v-if="item.promotionInfo.matchedPros.length != 1" style="background:#fff"></span>
                </div>
                <p>{{item.title}}</p>
                <div class="pris">
                    <div>
                          <span>￥{{(item.price/100).toFixed(2)}}</span>
                    </div>
                    <div>
                          <i class="icon iconfont icon-8"></i>
                    </div>
                </div>
            </div>

      </div>
  </div>
</template>
<script>
    export default{
      computed:{
          porpFn1(){
            return this.$store.state.porpupStore1;
          },
          shan(){
            return this.$store.state.shan;
          }
      },
      data(){
          return {
              flag1:true,
              flag2:true,
              msg:""
          }
      },
      methods:{
            close(){
                this.$store.commit("porpupFn1")
            },
            paixu(){
                    if(this.flag1){
                    this.$store.state.shan.sort(function(a,b){
                    return a.price-b.price})
                    }else{
                    this.$store.state.shan.sort(function(a,b){
                    return b.price-a.price})
                    }
                    this.flag1 = !this.flag1;
            },
            xiao(){
                    if(this.flag2){
                    this.$store.state.shan.sort(function(a,b){
                    return a.stock-b.stock})
                    }else{
                    this.$store.state.shan.sort(function(a,b){
                    return b.stock-a.stock})
                    }
                    this.flag2 = !this.flag2;
            },
            sssp(){
                this.$http.jsonp("https://gatewx.dmall.com/search/result?param=%7B%22keyword%22%3A%22"+this.msg+"%22%2C%22pairs%22%3A%221-10437%22%2C%22pageNum%22%3A%221%22%2C%22index%22%3A1%2C%22pageSize%22%3A20%7D&token=180DD99790479F6661A7631E63E851E6CCC1220E816FFA5BF9AAE4FEB0983621C91C4E4CDC646F0E4842C6B3BA2EC14BDD5E506DE86092704FFAAA8C5AEEA91DF37A33160A0D9ED37FB12AE98FDA9C3C755C9B6E9D2FD0DBAD0C148B0352D9E55EAD28AC247E0CC4E8B4716430A27F1AB433E93B693163937CB69F046970D15F&source=2&tempid=C7983DF1925000028B468A009BB0185A&pubParam=%7B%7D&_=1499776612193")
                .then(function(req){
                    this.$store.state.shan = req.body.data.list;
                })
            }

        },
        mounted(){

        }

    }
</script>
<style scoped>
.porpup{
position:absolute;
left:0;right:0;top:0;bottom:0;
background:#fff;
z-index:300;
}
.back{background-color:black;width:0.3rem;height:0.3rem;text-align:center;line-height:0.25rem;border-radius:50%;font-size:0.25rem;display:inline-block;}
.back i{color:#fff;}
.po-head .po-head-fr{width:85%;position:relative;text-align:center;}
.po-head{height:0.44rem;display:flex;background:#fff;align-items:center;width:100%;box-shadow:0 0 10px #ccc}
.po-head .po-head-fl{width:15%;text-align:center}
.po-head .po-head-fr input{height:0.26rem;outline:none;font-size:0.15rem;padding-left:0.25rem;width:88%;border:none;border:1px solid #ccc}
.po-head .po-head-fr i{position:absolute;font-size:0.2rem;color:#ccc;left:0.1rem;top:0.02rem}
.sh1{display:flex;align-items:center;justify-content:space-between;height:0.4rem;border-top:0.04rem solid #F6F6F6;border-bottom:0.04rem solid #F6F6F6}
.sh1 div{text-align:center;width:33.333%}
.lis {display:flex;align-items:center;flex-wrap:wrap;}
.lis>div{width:47%;border:0.055rem solid #F6F6F6}
.lis>div img{width:70%;margin-left:15%}
.lis>div p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0.1rem}
.pris div:first-child span{font-size:0.17rem;color:#FF7734}
.pris {display:flex;align-item:center;padding:0 0.1rem;justify-content:space-between;}
.pris div:last-child{width:0.32rem;height:0.22rem;border:1px solid #FFB89C;text-align:center;line-height:0.22rem;margin-top:0.15rem}
.pris div:last-child i{color:#FFB89C;}
.tejia{margin:0 0.1rem}
.tejia span {background-color:#FF6161;color:#fff;height:0.18rem;line-height:0.18rem;padding:0 0.05rem;font-weight:bold}
.sh1 i{color:#FFB89C;}
</style>
